<template>
  <page-layout :show-back="true">
	<view class="followers-page">
		<!-- 粉丝用户列表 -->
		<scroll-view scroll-y class="followers-list" @scrolltolower="loadMore" refresher-enabled 
			:refresher-triggered="isRefreshing" @refresherrefresh="onRefresh">
			<view v-if="followersList.length > 0" class="list-content">
				<view v-for="(user, index) in followersList" :key="index" class="user-item">
					<view class="user-avatar" @click="goToUserProfile(user.id)">
						<image :src="user.avatar" mode="aspectFill"></image>
					</view>
					<view class="user-info" @click="goToUserProfile(user.id)">
						<view class="name-row">
							<text class="username">{{user.nickname}}</text>
							<text v-if="user.level" class="level">Lv.{{user.level}}</text>
						</view>
						<text class="bio">{{user.bio || '这个人很懒，什么都没写~'}}</text>
					</view>
					<view class="follow-btn" :class="{'active': user.isFollowing}" @click="toggleFollow(user)">
						<text>{{user.isFollowing ? '已关注' : '关注'}}</text>
					</view>
				</view>
			</view>
			
			<!-- 空状态 -->
			<view v-if="followersList.length === 0 && !isLoading" class="empty-state">
				<uni-icons type="person" size="64" color="#cccccc"></uni-icons>
				<text class="empty-text">暂无粉丝</text>
				<button class="discover-btn" @click="goToDiscover">去发现更多有趣内容</button>
			</view>
			
			<!-- 加载状态 -->
			<view v-if="isLoading" class="loading-more">
				<text>加载中...</text>
			</view>
			<view v-if="!isLoading && followersList.length > 0 && !hasMore" class="no-more">
				<text>没有更多了</text>
			</view>
		</scroll-view>
	</view>
  </page-layout>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue';
import PageLayout from "../../components/PageLayout.vue";

// 页面数据
const followersList = ref([]);
const page = ref(1);
const pageSize = ref(10);
const hasMore = ref(true);
const isLoading = ref(true);
const isRefreshing = ref(false);

// 加载粉丝列表
const loadFollowersList = async (isRefresh = false) => {
	if (isRefresh) {
		page.value = 1;
		hasMore.value = true;
		followersList.value = [];
	}
	
	isLoading.value = true;
	
	// 模拟请求延迟
	setTimeout(() => {
		// 模拟接口返回数据
		const mockUsers = Array.from({ length: 10 }, (_, i) => ({
			id: i + 1 + (page.value - 1) * 10,
			nickname: `粉丝${i + 1 + (page.value - 1) * 10}`,
			avatar: 'https://picsum.photos/200?' + (i + (page.value - 1) * 10 + 100),
			bio: i % 3 === 0 ? '热爱生活，热爱分享' : (i % 3 === 1 ? '摄影爱好者' : '旅行达人'),
			level: Math.floor(Math.random() * 10) + 1,
			isFollowing: Math.random() > 0.5
		}));
		
		// 模拟没有更多数据
		if (page.value >= 3) {
			hasMore.value = false;
		}
		
		if (isRefresh) {
			followersList.value = mockUsers;
			isRefreshing.value = false;
		} else {
			followersList.value = [...followersList.value, ...mockUsers];
		}
		
		isLoading.value = false;
	}, 1000);
};

// 加载更多
const loadMore = () => {
	if (!hasMore.value || isLoading.value) return;
	page.value++;
	loadFollowersList();
};

// 下拉刷新
const onRefresh = () => {
	isRefreshing.value = true;
	loadFollowersList(true);
};

// 切换关注状态
const toggleFollow = (user) => {
	if (user.isFollowing) {
		// 显示确认弹窗
		uni.showModal({
			title: '取消关注',
			content: `确定取消关注 ${user.nickname} 吗？`,
			success: (res) => {
				if (res.confirm) {
					// 模拟取消关注请求
					setTimeout(() => {
						user.isFollowing = false;
						uni.showToast({
							title: '已取消关注',
							icon: 'none'
						});
					}, 500);
				}
			}
		});
	} else {
		// 模拟关注请求
		user.isFollowing = true;
		uni.showToast({
			title: '关注成功',
			icon: 'none'
		});
	}
};

// 跳转到用户主页
const goToUserProfile = (userId) => {
	uni.navigateTo({
		url: `/pages/user/profile?id=${userId}`
	});
};

// 返回上一页
const goBack = () => {
	console.log('返回按钮被点击');
	uni.showToast({
		title: '正在返回...',
		icon: 'none',
		duration: 500
	});
	
	setTimeout(() => {
		uni.navigateBack({
			delta: 1,
			fail: () => {
				uni.switchTab({
					url: '/pages/user/me'
				});
			}
		});
	}, 300);
};

// 去发现页面
const goToDiscover = () => {
	uni.switchTab({
		url: '/pages/index/index'
	});
};

// 页面加载时获取数据
onMounted(() => {
	loadFollowersList();
});
</script>

<style>
.followers-page {
	background-color: #f8f8f8;
	min-height: 100vh;
}

.followers-list {
	height: calc(100vh - 44px);
}

.list-content {
	padding: 10px 15px;
}

.user-item {
	display: flex;
	align-items: center;
	padding: 15px 0;
	border-bottom: 1px solid #f0f0f0;
}

.user-avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	overflow: hidden;
	margin-right: 12px;
}

.user-avatar image {
	width: 100%;
	height: 100%;
}

.user-info {
	flex: 1;
}

.name-row {
	display: flex;
	align-items: center;
	margin-bottom: 4px;
}

.username {
	font-size: 16px;
	font-weight: 500;
	color: #333;
	margin-right: 8px;
}

.level {
	font-size: 12px;
	color: #ff8c00;
	background-color: rgba(255, 140, 0, 0.1);
	padding: 2px 5px;
	border-radius: 10px;
}

.bio {
	font-size: 13px;
	color: #999;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 200px;
}

.follow-btn {
	padding: 6px 14px;
	border-radius: 100px;
	font-size: 14px;
	background-color: #f2f3f5;
	color: #333;
	display: flex;
	align-items: center;
	justify-content: center;
}

.follow-btn.active {
	background-color: rgba(0, 120, 255, 0.1);
	color: #0078ff;
	border: 1px solid rgba(0, 120, 255, 0.3);
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 100px;
}

.empty-image {
	width: 150px;
	height: 150px;
	margin-bottom: 20px;
}

.empty-text {
	font-size: 16px;
	color: #999;
	margin-bottom: 20px;
}

.discover-btn {
	background-color: #0078ff;
	color: white;
	font-size: 16px;
	padding: 10px 20px;
	border-radius: 100px;
	border: none;
	width: 200px;
}

.loading-more, .no-more {
	text-align: center;
	padding: 20px 0;
	color: #999;
	font-size: 14px;
}
</style>
